<template>
    <div class="bgxqbox">
        <div class="cpbtnbox">
            <!-- <el-button type="success" @click="exporPdf">导出PDF</el-button> -->
            <div class="rpbtn" @click="close">
                <img style="display: block;" src="/src/assets/back.png"/>返回
            </div>
            <div class="rpbtn downloading" v-if="downloading">
                <img style="display: block;" src="/src/assets/xz.png"/>下载中
            </div>
            <div class="rpbtn" v-else @click="exporPdf">
                <img style="display: block;" src="/src/assets/xz.png"/>下载PDF
            </div>
        </div>
        
        <div id="pdfBox" ref='pdfBox'>
            <div class="pdfpage page1" ref="pdfpage">
                <div style="padding: 52px 0 0 62px;;"><img style="display: block;" src="/src/style/images/logo.png"/></div>
                <div style="padding: 270px 0 0 610px;">
                    <img style="display: block;" src="/src/style/images/rp1-2.png"/>
                </div>
                <ul>
                    <li>报告编号：{{details.reportNumber}}</li>
                    <li>方案编号：{{details.planNumber}}</li>
                    <li>作物品种：{{details.cropName}}，{{details.cropSeriesName}}</li>
                    <li>公司名称：{{details.companyName}}</li>
                    <li>报告日期：{{formatDate(details.createTime)}}</li>
                </ul>
                <div class="bgsm">本报告有助于实时了解作物生长情况，提供决策依据，优化种植管理，提高产量和质量，降低成本<br>同时，通过报告还能记录种植过程和取得的成效，为今后的种植决策提供参考。</div>

                <div class="rp-pagination" v-if="!hideEle">第1页，共{{totalPage}}页</div>
            </div>
            <div class="pdfpage page2" ref="pdfpage">
                <div class="rp-pagination" v-if="!hideEle">第2页，共{{totalPage}}页</div>
                <div class="title"><img src="/src/style/images/bgbt.png"/></div>
                <div class="subTitle">
                    <div class="item"><el-icon size="26px"><Document /></el-icon>报告编号：{{details.reportNumber}}</div>
                    <div class="item"><el-icon size="26px"><Tickets /></el-icon>方案编号：{{details.planNumber}}</div>
                </div>
                <div class="content">
                    <div class="conTitle">基本信息</div>
                    <ul class="tableBox" >
                        <li>
                            <div class="th">方案编号</div> 
                            <div class="td">{{reportBasicRsp.planNumber}}</div>
                            <div class="th">方案预算</div> 
                            <div class="td">{{reportBasicRsp.budgetFee?(reportBasicRsp.budgetFee.amount/10000).toFixed(2):0}}（万）</div>
                        </li>
                        <li>
                            <div class="th">目标亩产量</div> 
                            <div class="td">{{reportBasicRsp.targetYield}}（KG）</div>
                            <div class="th">地块面积</div> 
                            <div class="td">{{reportBasicRsp.landArea}}（亩）</div>
                        </li>
                        <li>
                            <div class="th">作物品种</div> 
                            <div class="td">{{reportBasicRsp.cropName}}，{{reportBasicRsp.cropSeriesName}}</div>
                            <div class="th">种植周期</div> 
                            <div class="td">{{reportBasicRsp.plantingCycle}}（天）</div>
                        </li>
                        <li>
                            <div class="th">创建人</div> 
                            <div class="td">{{reportBasicRsp.createName}}</div>
                            <div class="th">创建日期</div> 
                            <div class="td">{{formatDate(reportBasicRsp.createTime)}}</div>
                        </li>
                        <li>
                            <div class="th">公司名称</div> 
                            <div class="td">{{reportBasicRsp.companyName}}</div>
                        </li>
                    </ul>
                </div>
                <div class="tipsBox" style="margin-top: 650px;">
                    <h4><el-icon color="#F76969" size="20px"><Warning /></el-icon>免责声明：</h4>
                    <p>本《种植报告》根据可靠的科学数据和实地观察编制，旨在提供客观的种植情况和建议。然而，由于种植过程受多种因素影响，</p>
                    <p>包括但不限于天气、病虫害等，因此报告中的任何预测、意见或建议没有绝对准确性和可靠性的保证。</p>
                    <p>因此，本报告的使用者应自行承担一切决策和行动的责任，本报告编制方不承担任何法律责任。使用本报告即表示同意本免责声明的内容。</p>
                </div>
            </div>
            <div class="pdfpage page3" ref="pdfpage">
                <div class="rp-pagination" v-if="!hideEle">第3页，共{{totalPage}}页</div>
                <div class="title"><img src="/src/style/images/bgbt.png"/></div>
                <div class="subTitle">
                    <div class="item"><el-icon size="26px"><Document /></el-icon>报告编号：{{details.reportNumber}}</div>
                    <div class="item"><el-icon size="26px"><Tickets /></el-icon>方案编号：{{details.planNumber}}</div>
                </div>
                <div class="content">
                    <div class="conTitle">经济效益分析</div>
                    <div class="conSubTitle">
                        <img src="/src/style/images/rp3-1.png"/>
                        评估计划目标产量与实际产量，计划预算与实际支出，来分析投入和产出，计算成本、收益和盈亏情况
                        <img src="/src/style/images/rp3-2.png" style="margin: 0 0 0 9px;"/>
                    </div>
                    <table class="tableBox2" style="margin-top: 24px;">
                        <tr>
                            <th width="275px;">目标</th>
                            <th width="275px;">结果</th>
                            <th width="275px;">提示</th>
                            <th style="border-left:0 ;"></th>
                        </tr>
                        <tr>
                            <td>产量：{{economicAnalysisRsp.totalTargetYield}}（kg）</td>
                            <td>实际产量：{{economicAnalysisRsp.shougeYield}}（kg）</td>
                            <td>亩产量：{{economicAnalysisRsp.avgYield}}（kg/亩）</td>
                            <td style="border-left:0 ;">
                                <img v-if="economicAnalysisRsp.yieldColor=='red'" src="/src/style/images/ss.png" style="margin: 0;width: 10px;"/>
                                <img v-if="economicAnalysisRsp.yieldColor=='green'" src="/src/style/images/xj.png" style="margin: 0;width: 10px;"/>
                            </td>
                        </tr>
                        <tr>
                            <td>预算：{{economicAnalysisRsp.budgetFee}}（元）</td>
                            <td>实际支付：{{economicAnalysisRsp.payAmount}}（元）</td>
                            <td>亩成本约：{{economicAnalysisRsp.avgPayAmount}}（元）</td>
                            <td style="border-left:0 ;">
                                <img v-if="economicAnalysisRsp.payAmountColor=='red'" src="/src/style/images/ss.png" style="margin: 0;width: 10px;"/>
                                <img v-if="economicAnalysisRsp.payAmountColor=='green'" src="/src/style/images/xj.png" style="margin: 0;width: 10px;"/>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="pdfpage page4" ref="pdfpage" v-for="bindex in budgetAnalysisLineRspLength" :key="bindex">
                <div class="rp-pagination" v-if="!hideEle">第{{4+(bindex-1)}}页，共{{totalPage}}页</div>
                <div class="title"><img src="/src/style/images/bgbt.png"/></div>
                <div class="subTitle">
                    <div class="item"><el-icon size="26px"><Document /></el-icon>报告编号：{{details.reportNumber}}</div>
                    <div class="item"><el-icon size="26px"><Tickets /></el-icon>方案编号：{{details.planNumber}}</div>
                </div>
                <div class="content">
                    <div class="conTitle">预算与支出</div>
                    <div class="conTitle2" style="background: #F4F4F4;padding: 40px 0 21px 24px;margin-top: 40px;">
                        <span>农事事项：</span>
                    </div>
                    <ul class="yszclist">
                        <li v-for="dt in budgetAnalysisLineRspList.slice((8*(bindex-1)), 8*bindex)" :key="dt.plantingPlanReportId">
                            <div class="name">
                                <img v-if="dt.taskName=='备耕'" :src="`./images/report/rp4-0.png`"/>
                                <img v-else-if="dt.taskName=='整地'" :src="`./images/report/rp4-2.png`"/>
                                <img v-else-if="dt.taskName=='直播'" :src="`./images/report/rp4-3.png`"/>
                                <img v-else-if="dt.taskName=='育秧移栽'" :src="`./images/report/rp4-16.png`"/>
                                <img v-else-if="dt.taskName=='巡田'" :src="`./images/report/rp4-8.png`"/>
                                <img v-else-if="dt.taskName=='匀补苗'" :src="`./images/report/rp4-10.png`"/>
                                <img v-else-if="dt.taskName=='收割'" :src="`./images/report/rp4-14.png`"/>
                                <img v-else-if="dt.taskName=='运输'" :src="`./images/report/rp4-12.png`"/>
                                <img v-else-if="dt.taskName=='烘干'" :src="`./images/report/rp4-13.png`"/>
                                <img v-else-if="dt.taskName=='仓储'" :src="`./images/report/rp4-11.png`"/>
                                <img v-else-if="dt.taskName=='追肥'" :src="`./images/report/rp4-4.png`"/>
                                <img v-else-if="dt.taskName=='病虫草害防治'" :src="`./images/report/rp4-15.png`"/>
                                <img v-else-if="dt.taskName=='水管理'" :src="`./images/report/rp4-17.png`"/>
                                <img v-else :src="`./images/report/rp4-9.png`"/>
                                <h5>{{dt.taskName}}</h5>
                                <!-- <p>（3.19）</p> -->
                            </div>
                            <div class="pgData">
                                <progress-bar width="760px" :ratio="((dt.payAmount.amount/dt.budgetFee.amount)<=1?(dt.payAmount.amount/dt.budgetFee.amount):1)*100+'%'" title="预算/支出" :tips="dt.budgetFee.amount+'/'+dt.payAmount.amount+'（元）'"/>
                                <progress-bar v-if="dt.mapAreaSize>0" width="614px" :ratio="getRatio1(budgetAnalysisLineRspList,dt)" title="作业面积/亩成本" :tips="`${dt.mapAreaSize}（亩）/ ${dt.avgPayAmount?dt.avgPayAmount.amount:''}（元）`" bgd="linear-gradient(180deg, #57CDA2 0%, #04AE70 100%)"/>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pdfpage page5" ref="pdfpage" v-for="bindex in taskDataRspListLength" :key="bindex">
                <div class="rp-pagination" v-if="!hideEle">第{{2+budgetAnalysisLineRspLength+taskDataRspListLength+(bindex-1)}}页，共{{totalPage}}页</div>
                <div class="title"><img src="/src/style/images/bgbt.png"/></div>
                <div class="subTitle">
                    <div class="item"><el-icon size="26px"><Document /></el-icon>报告编号：{{details.reportNumber}}</div>
                    <div class="item"><el-icon size="26px"><Tickets /></el-icon>方案编号：{{details.planNumber}}</div>
                </div>
                <div class="content">
                    <div class="conTitle">农事分析</div>
                    <div class="nsfxtop">
                        <img src="/src/style/images/rp5-1.png"/>
                        <span class="nsname">农事完成情况：</span>
                        <progress-bar v-if="taskCountRsp" class="probar2" width="730px" :ratio="taskCountRsp.progress" :title="taskCountRsp.progress" :tips="taskCountRsp.ywcNum+'/'+taskCountRsp.totalNum"/>
                    </div>
                    <div class="conTitle2" style="background: #F4F4F4;padding: 40px 0 0 24px;margin-top: 20px;">
                        <span>农事事项：</span>
                    </div>
                    <div class="fivTbTitle">
                        <div class="buzhtag"><i></i>计划</div>
                        <div class="buzhtag"><i style="background: #04AE70;"></i>已完成</div>
                        <div class="buzhtag"><i style="background: #4079E4;"></i>已处理</div>
                        <div class="buzhtag"><i style="background: #9B9B9B;"></i>已取消</div>
                        <div class="tscs" style="margin-left: 242px;">作业天数/次数</div>
                        <div class="tscs" style="margin-left: 54px;">状态</div>
                        <div class="tscs" style="margin-left: 60px;">负责人</div>
                    </div>
                    <ul class="yszclist yszclist2">
                        <template v-for="item in taskDataRspList.slice((7*(bindex-1)), 7*bindex)" :key="item">
                            <li>
                                <!-- <li v-for="dt in budgetAnalysisLineRspList.slice((8*(bindex-1)), 8*bindex)" :key="dt.plantingPlanReportId"> -->
                                <div class="name">
                                    <img v-if="item.taskName=='备耕'" :src="`./images/report/rp4-0.png`"/>
                                    <img v-else-if="item.taskName=='整地'" :src="`./images/report/rp4-2.png`"/>
                                    <img v-else-if="item.taskName=='直播'" :src="`./images/report/rp4-3.png`"/>
                                    <img v-else-if="item.taskName=='育秧移栽'" :src="`./images/report/rp4-16.png`"/>
                                    <img v-else-if="item.taskName=='巡田'" :src="`./images/report/rp4-8.png`"/>
                                    <img v-else-if="item.taskName=='匀补苗'" :src="`./images/report/rp4-10.png`"/>
                                    <img v-else-if="item.taskName=='收割'" :src="`./images/report/rp4-14.png`"/>
                                    <img v-else-if="item.taskName=='运输'" :src="`./images/report/rp4-12.png`"/>
                                    <img v-else-if="item.taskName=='烘干'" :src="`./images/report/rp4-13.png`"/>
                                    <img v-else-if="item.taskName=='仓储'" :src="`./images/report/rp4-11.png`"/>
                                    <img v-else-if="item.taskName=='追肥'" :src="`./images/report/rp4-4.png`"/>
                                    <img v-else-if="item.taskName=='病虫草害防治'" :src="`./images/report/rp4-15.png`"/>
                                    <img v-else-if="item.taskName=='水管理'" :src="`./images/report/rp4-17.png`"/>
                                    <img v-else :src="`./images/report/rp4-9.png`"/>
                                    <h5>{{item.taskName}}</h5>
                                </div>
                                <div class="pgData pgData2">
                                    <template v-if="item.chartRspList.length">
                                        <div class="pgStatus" :class="item.taskStatus" v-for="ps in item.chartRspList" :key="ps" :title="`${ps.taskStartTime.slice(0,10)+' ~ '+ps.taskEndTime.slice(0,10)+'，'+ps.dayNum+'天'}`"
                                            :style="`width:${(480/item.workDay)*(ps.dayNum>item.workDay?item.workDay:ps.dayNum)}px`">
                                            <span>{{ps.taskStartTime.slice(0,10)+' ~ '+ps.taskEndTime.slice(0,10)+'，'+ps.dayNum+'天'}}</span>
                                            <div v-if="ps.dayNum>item.workDay" class="statusms yq">延期{{ps.dayNum-item.workDay}}天</div>
                                            <div v-if="ps.dayNum<item.workDay" class="statusms">提前{{item.workDay-ps.dayNum}}天</div>
                                        </div>
                                    </template>
                                    <!-- <div class="pgStatus" style="width: 550px;background: linear-gradient(180deg, #57CDA2 0%, #04AE70 100%);">
                                        <span>{{item.taskStartTime+'-'+item.taskEndTime}}，{{item.workDay}}天</span>
                                    </div> -->
                                </div>
                                <div class="ysItem" style="width: 150px;">{{item.workDay}}/{{item.operationCount}}</div>
                                <div class="ysItem" :class="item.taskStatus" style="width: 100px;">{{item.taskStatusMeaning}}</div>
                                <div class="ysItem" style="width: 100px;">{{item.fzUserName}}</div>
                            </li>
                            <li class="fg">
                                <div class="name"></div>
                                <div class="pgData pgData2"></div>
                                <div class="ysItem" style="width: 150px;"></div>
                                <div class="ysItem" style="width: 100px;color:#04AE70;"></div>
                                <div class="ysItem" style="width: 100px;"></div>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
            <div class="pdfpage page6" ref="pdfpage">
                <div class="rp-pagination" v-if="!hideEle">第{{3+budgetAnalysisLineRspLength+taskDataRspListLength+1}}页，共{{totalPage}}页</div>
                <div class="title"><img src="/src/style/images/bgbt.png"/></div>
                <div class="subTitle">
                    <div class="item"><el-icon size="26px"><Document /></el-icon>报告编号：{{details.reportNumber}}</div>
                    <div class="item"><el-icon size="26px"><Tickets /></el-icon>方案编号：{{details.planNumber}}</div>
                </div>
                <div class="content">
                    <div class="conTitle">长势分析</div>
                    <growth :list="xuntianAnalysisRspList" :info="details" />
                </div>
            </div>
            <div class="pdfpage page7" ref="pdfpage">
                <div class="rp-pagination" v-if="!hideEle">第{{3+budgetAnalysisLineRspLength+taskDataRspListLength+2}}页，共{{totalPage}}页</div>
                <div class="title"><img src="/src/style/images/bgbt.png"/></div>
                <div class="subTitle">
                    <div class="item"><el-icon size="26px"><Document /></el-icon>报告编号：{{details.reportNumber}}</div>
                    <div class="item"><el-icon size="26px"><Tickets /></el-icon>方案编号：{{details.planNumber}}</div>
                </div>
                <div class="content">
                    <div class="conTitle">用肥分析</div>
                    <fertilizer-echart :chart="fertilizerChart" :count="fertilizerCount" />
                </div>
            </div>
            <div class="pdfpage page8" ref="pdfpage">
                <div class="rp-pagination" v-if="!hideEle">第{{3+budgetAnalysisLineRspLength+taskDataRspListLength+3}}页，共{{totalPage}}页</div>
                <div class="title"><img src="/src/style/images/bgbt.png"/></div>
                <div class="subTitle">
                    <div class="item"><el-icon size="26px"><Document /></el-icon>报告编号：{{details.reportNumber}}</div>
                    <div class="item"><el-icon size="26px"><Tickets /></el-icon>方案编号：{{details.planNumber}}</div>
                </div>
                <div class="content">
                    <div class="conTitle">用药分析</div>
                    <drug-echart :chart="drugChart" :count="drugCount" />
                </div>
            </div>
            
        </div>
    </div>
    
</template>
<script setup>
import {ref,onMounted} from "vue"
import { useRouter, useRoute } from 'vue-router'
import ExportSavePdf from "@/utils/html2pdf";
import progressBar from './components/progressBar.vue'
import growth from './components/growth.vue'
import fertilizerEchart from './components/fertilizerEchart.vue'
import drugEchart from './components/drugEchart.vue'
import { message } from '@/utils/element'
import { formatDate } from '@/utils/format'
import { getReportDetail} from '@/api/system'

const router = useRouter()

const hideEle = ref(false)
const downloading = ref(false) // 下载中
const details = ref({})

const reportBasicRsp = ref({})
const economicAnalysisRsp = ref({})
const budgetAnalysisLineRspList = ref([])
const budgetAnalysisLineRspLength = ref(0)

const taskCountRsp = ref(null)
const taskDataRspList = ref([])
const taskDataRspListLength = ref(0)

const drugChart = ref(null)
const drugCount = ref(null)

const fertilizerChart = ref(null)
const fertilizerCount = ref(null)

const xuntianAnalysisRspList = ref([])

const totalPage = ref(6)

onMounted(async ()=>{

    const { currentRoute } = router
    const id = currentRoute.value.query.id
    const res = await getReportDetail(id)

    details.value = res.data
    reportBasicRsp.value = res.data.reportBasicRsp
    economicAnalysisRsp.value = res.data.economicAnalysisRsp
    budgetAnalysisLineRspList.value = res.data.budgetAnalysisLineRspList
    budgetAnalysisLineRspLength.value = Math.ceil(budgetAnalysisLineRspList.value.length/8)

    taskCountRsp.value = res.data.taskProgressRsp.countRsp
    taskDataRspList.value = res.data.taskProgressRsp.dataRspList
    taskDataRspListLength.value = Math.ceil(taskDataRspList.value.length/7)

    drugChart.value = res.data.medicationAnalysisChartRspList
    drugCount.value = res.data.medicationAnalysisTotalRsp

    fertilizerChart.value = res.data.fertilizerAnalysisChartRspList
    fertilizerCount.value = res.data.fertilizerAnalysisTotalRsp

    xuntianAnalysisRspList.value = res.data.xuntianAnalysisWapperRsp.xuntianAnalysisRspList

    totalPage.value += budgetAnalysisLineRspLength.value
    totalPage.value += taskDataRspListLength.value

})

const close = ()=>{
    router.back(-1)
}

const exporPdf = ()=>{
    hideEle.value = true
    downloading.value = true
    // 容器宽度1100px，时按A4显示比例换算每页高度为：1487px
    setTimeout(()=>{
        ExportSavePdf('pdfBox','生产报告',`${formatDate(details.value.createTime)}`,()=>{
            // 下载成功
            hideEle.value = false
            downloading.value = false
            message('下载成功',2)
        })
    },500)
    
}

const getRatio1 = (arr,item)=>{
    // const curRt = item.avgPayAmount.amount/item.mapAreaSize
    // // 以每亩成本最大作为进度条的100%
    // const mdatas = arr.map(it =>{
    //     return it.avgPayAmount.amount/it.mapAreaSize
    // })
    // const max = Math.max(...mdatas);
    // console.log("(curRt/max)*100:",(curRt/max)*100)
    // return (curRt/max)*100+'%'

    // 以亩成本最大作为进度条的100%
    const avgPayAmounts = arr.map(it =>{
        if(it.avgPayAmount){
            return it.avgPayAmount.amount
        }else{
            return 0
        }
    })
    const max = Math.max(...avgPayAmounts);
    if(item.avgPayAmount){
        return (item.avgPayAmount.amount/max)*100+'%'
    }else{
        return 0
    } 
}

const goBack = ()=>{
    router.back()
}

</script>
<style lang="scss">
.bgxqbox{
    background: #EEEEEE;
    padding: 20px 0 0 0;
    .cpbtnbox{
        position: fixed;
        z-index: 100;
        right: 20px;
        top: 75px;
        .rpbtn{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 38px;
            background: #FFFFFF;
            border-radius: 2px;
            border: 1px solid #DDDDDD;
            &.downloading{
                color: #999;
                &:hover{
                    cursor: not-allowed;
                }
            }
            &+.rpbtn{
                margin-top: 16px;
            }
            &:hover{
                background: #e9f8f3;
                cursor: pointer;
            }
            img{
                display: block;
                margin: 0 10px 0 0;
                width: 15px;
            }
        }
    }
    #pdfBox{
        box-sizing: border-box;
        padding: 0;
        width: 1100px;
        margin: 0 auto;
        .pdfpage{
            position: relative;
            z-index:10;
            box-sizing: border-box;
            background-color: #fff;
            width: 100%;
            height: 1477px; 
            margin: 0 0 10px 0;
            &.page1{
                background: url(/src/style/images/rp1-1.png) left top no-repeat;
                background-size:100% 100%;
                .rp-pagination{
                    background: rgba(255, 255, 255,0.32);
                    border-radius: 20px;
                    width: 127px;
                    height: 40px;
                    justify-content: center;
                    color: #04AE70;
                }
                ul{
                    margin: 0;
                    padding: 40px 0 0 616px;
                    list-style: none;
                    li{
                        display: flex;
                        align-items: center;
                        font-size: 24px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        color: #85C225;
                        line-height: 46px;
                        &::before{
                            content: '';
                            display: block;
                            width: 15px;
                            height: 15px;
                            background: #85C225;
                            transform: rotate(45deg);
                            margin: 0 15px 0 0;
                        }
                    }
                }
                .bgsm{
                    box-sizing: border-box;
                    position: absolute;
                    left: 0;
                    bottom: 70px;
                    width: 100%;
                    text-align: center;
                    font-size: 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 22px;
                    padding: 0 197px;
                }
            }
            .title{
                padding: 60px 0 0 0;
                img{
                    display: block;
                    margin: 0 auto;
                }
            }
            .subTitle{
                display: flex;
                height: 60px;
                border-bottom: 1px solid #184E7C;
                margin: 70px 0 0 0;
                i{
                    margin: 0 5px 0 0;
                }
                .item{
                    display: flex;
                    flex: 1;
                    justify-content: center;
                    align-items: center;
                    font-size: 22px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #184E7C;
                }
            }
            .rp-pagination{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                position: absolute;
                z-index: 10;
                right: 35px;
                bottom: 20px;
                height: 40px;
                font-size: 16px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #85C225;
            }
            .content{
                width: 1035px;
                margin: 0 auto;
                .conTitle{
                    height: 32px;
                    font-size: 32px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #85C225;
                    text-align: center;
                    margin: 70px 0 0 0;
                }
                .conTitle2{
                    display: flex;
                    span{
                        display: flex;
                        align-items: center;
                        font-size: 18px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        color: #333333;
                        &::before{
                            content: '';
                            display: block;
                            width: 6px;
                            height: 21px;
                            background: #85C225;
                            margin: 0 10px 0 0;
                        }
                    }
                }
                .conSubTitle{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 24px;
                    font-size: 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    line-height: 24px;
                    margin: 16px 0 0 0;
                    img{
                        display: block;
                        width: 20px;
                        margin: 0 9px 0 0;
                    }
                }
                .tableBox{
                    padding: 40px 0 0 0;
                    margin: 0;
                    list-style: none;
                    li{
                        display: flex;
                        height: 41px;
                        border: 1px solid #DDDDDD;
                        &+li{
                            border-top: 0;
                        }
                        .th{
                            display: flex;
                            box-sizing: border-box;
                            flex-shrink: 0;
                            align-items: center;
                            justify-content: flex-end;
                            width: 163px;
                            background: #85C225;
                            font-size: 16px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 500;
                            color: #FFFFFF;
                            padding: 0 15px;
                        }
                        .td{
                            display: flex;
                            box-sizing: border-box;
                            flex: 1;
                            flex-shrink: 0;
                            align-items: center;
                            padding: 0 0 0 20px;
                            font-size: 16px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                        }
                    }
                } 
                .tableBox2{
                    border: 1px solid #DDDDDD;
                    border-collapse: collapse;
                    padding: 0;
                    margin: 0;
                    width: 100%;
                    th,td{
                        font-size: 16px;
                        font-family: PingFangSC, PingFang SC;
                        height: 41px;
                        text-align: center;
                    }
                    th{
                        background: #85C225;
                        font-weight: 500;
                        color: #FFFFFF;
                        padding: 0 15px;
                        &+th{
                            border-left: 1px solid #DDDDDD;
                        }
                    }
                    td{
                        font-weight: 400;
                        color: #333333;  
                        border-top: 1px solid #DDDDDD;
                        &+td{
                            border-left: 1px solid #DDDDDD;
                        }
                    }
                }
                .yszclist{
                    box-sizing: border-box;
                    width: 100%;
                    padding: 0;
                    margin: 0;
                    &.yszclist2{
                        li{
                            margin-bottom: 0;
                            &.fg{
                                height: 3px;
                                background: #fff;
                            }
                        }
                    }
                    li{
                        display: flex;
                        box-sizing: border-box;
                        height: 110px;
                        background: rgba(16, 178, 119,0.06);
                        margin: 0 0 3px 0;
                        &:nth-child(2n+1){
                            background: rgba(16, 178, 119,0.15);
                        }
                        .name{
                            display: flex;
                            flex-flow: column;
                            justify-content: center;
                            align-items: center;
                            box-sizing: border-box;
                            width: 111px;
                            border-right: 1px solid #D0D0D0;
                            line-height: normal;
                            img{
                                display: block;
                                margin: 0;
                                width: 40px;
                            }
                            h5{
                                padding: 4px 0 2px 0;
                                margin: 0;
                                font-size: 16px;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 600;
                                color: #000000;
                            }
                            p{
                                padding: 0;
                                margin: 0;
                                font-size: 14px;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                color: #666666;
                            }
                        }
                        .pgData{
                            flex: 1;
                            display: flex;
                            flex-flow: column;
                            justify-content: center;
                            &.pgData2{
                                border-right: 1px solid #D0D0D0;
                            }
                            .pgStatus{
                                position: relative;
                                z-index: 10;
                                box-sizing: border-box;
                                width: 418px;
                                height: 24px;
                                line-height: 24px;
                                background: linear-gradient(180deg, #A9E944 0%, #85C225 100%);
                                border-top-right-radius: 12px;
                                border-bottom-right-radius: 12px;
                                font-size: 14px;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 600;
                                color: #FFFFFF;
                                text-align: right;
                                padding: 0;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                word-break: break-all;
                                span{
                                    padding: 0 40px 0 0;
                                    white-space: nowrap;
                                }
                                .statusms{
                                    position: absolute;
                                    z-index: 10;
                                    display: flex;
                                    align-items: center;
                                    height: 24px;
                                    top: 0;
                                    left:100%;
                                    padding: 0 0 0 10px;
                                    font-size: 14px;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 600;
                                    color: #12B379;
                                    white-space: nowrap;
                                }
                                .yq{
                                    color: #F76969;
                                }
                            }
                            .pgStatus{
                                &.YQX{
                                    background: linear-gradient(180deg, #C5C4C4 0%, #969696 100%);
                                }
                                &+.pgStatus{
                                    background: linear-gradient(180deg, #57CDA2 0%, #04AE70 100%);
                                    &.YWC{
                                        background: linear-gradient(180deg, #57CDA2 0%, #04AE70 100%);
                                    }
                                    &.YCL{
                                        background: linear-gradient(180deg, #86B0FF 0%, #5086EC 100%);
                                    }
                                }
                                
                                
                            }
                        }
                        .ysItem{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 16px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            &.YWC{
                                color: #04AE70;
                            }
                            &.YCL{
                                color: #4079E4;
                            }
                            &.YQX{
                                color: #9B9B9B;
                            }
                        }
                    }
                }
                .fivTbTitle{
                    display: flex;
                    align-items: center;
                    background-color: #F4F4F4;
                    padding: 25px 0 18px 154px;
                    .buzhtag{
                        display: flex;
                        align-items: center;
                        flex-shrink: 0;
                        font-size: 14px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        i{
                            display: block;
                            width: 14px;
                            height: 14px;
                            background: #85C225;
                            margin: 0 7px 0 0;
                        }
                        &+.buzhtag{
                            margin-left: 24px;
                        }
                    }
                    .tscs{
                        font-size: 16px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        color: #000000;
                    }
                }
                .nsfxtop{
                    display: flex;
                    align-items: center;
                    height: 70px;
                    background: rgba(0, 176, 112,0.1);
                    margin: 40px 0 0 0;
                    padding: 0 20px 0 24px;
                    .nsname{
                        font-size: 20px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        color: #333333;
                    }
                    img{
                        display: block;
                        margin: 0 5px 0 0;
                        width: 19px;
                    }
                }
            }
            .tipsBox{
                box-sizing: border-box;
                width: 1035px;
                background: #F7F7F7;
                border: 1px solid #E3E3E3;
                margin: 0 auto;
                font-size: 16px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                padding: 14px 32px;
                color: #666666;
                line-height: 22px;line-height: 22px;
                h4{
                    display: flex;
                    align-items: center;
                    padding: 0 0 5px 0;
                    margin: 0;
                    font-size: 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #F76969;
                    i{
                        margin: 0 5px 0 0;
                    }
                }
            }
        }
    }
}
 
</style>